<template>
	<div>
		<el-form :model="info" ref="forms">
			<el-table ref="tableRef" :data="info.data" border>
				<el-table-column align="center" type="index" label="序号" width="70"> </el-table-column>
				<el-table-column align="center" property="resourceName" label="数据资源名称">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.resourceName'" :rules="formRules.name" :key="row.$index">
							<el-input maxlength="16" show-word-limit placeholder="请输入数据资源名称" v-model="info.data[row.$index].resourceName" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="dataProvider" label="数据提供方">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.dataProvider'" :rules="formRules.role" :key="row.$index">
							<el-input maxlength="16" show-word-limit placeholder="请输入数据提供方" v-model="info.data[row.$index].dataProvider" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="application" label="所属应用"> </el-table-column>
				<el-table-column align="center" property="applicationCode" label="所属应用代码"> </el-table-column>
				<el-table-column align="center" property="classification" label="数据资源格式分类">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.classification'" :rules="formRules.geshi" :key="row.$index">
							<el-select v-model="info.data[row.$index].classification" placeholder="请选择数据资源格式分类" @change="changeClassification">
								<el-option v-for="item in optionList.classification_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="type" label="数据资源格式类型">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.type'" :rules="formRules.geshi" :key="row.$index">
							<el-select v-model="info.data[row.$index].type" placeholder="请选择数据资源格式类型">
								<el-option v-for="item in changeResult(classificationIndex)" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="domain" label="数据所属领域">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.domain'" :rules="formRules.geshi" :key="row.$index">
							<el-select v-model="info.data[row.$index].domain" placeholder="请选择数据所属领域">
								<el-option v-for="item in optionList.belong_domain" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="level" label="数据敏感级别">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.level'" :rules="formRules.geshi" :key="row.$index">
							<el-select v-model="info.data[row.$index].level" placeholder="请选择数据敏感级别">
								<el-option v-for="item in optionList.protectionLevel_type" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" property="coreFields" label="数据资源核心字段">
					<template #default="row">
						<el-form-item :prop="'data.' + row.$index + '.coreFields'" :rules="formRules.ziduan" :key="row.$index">
							<el-input maxlength="16" show-word-limit placeholder="请输入数据资源核心字段" v-model="info.data[row.$index].coreFields" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template #default="scope">
						<!-- <el-button link size="small" type="primary" @click="submitForm(forms)"> 确定 </el-button> -->
						<el-button link size="small" type="primary"> 确定 </el-button>
						<!-- <el-button link size="small" type="primary" @click.prevent="deleteRow(scope.$index)"> 删除 </el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<!-- <el-button type="primary" @click="submitForm()">Submit</el-button> -->
	</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import type { FormInstance } from 'element-plus';
import { useDict } from '/@/hooks/dict';
const prop = defineProps({
	classificationType: {
		type: String,
		default: () => {
			return '';
		},
	},
	addNewTable: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
watch(
	() => prop.classificationType,
	(val) => {
		if (val) {
			classificationNum.value = val;
		}
	}
);
const info = computed(() => {
	return {
		data: [...prop.addNewTable],
	};
});
const optionList = ref({});
const formRules = reactive({
	name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
	role: [{ required: true, message: '请输入角色', trigger: 'change' }],
});
const emit = defineEmits(['deleteRow']);
const deleteRow = (index: number) => {
	emit('deleteRow', index);
};
const classificationNum = ref('');
const classificationIndex = computed(() => {
	return classificationNum.value || '';
});
const changeClassification = (e: Event) => {
	classificationNum.value = e;
	info.value.data[0].type = '';
};
const changeResult = (index: string) => {
	switch (index) {
		case '1':
			return optionList.value.sql_type;
		case '2':
			return optionList.value.img_type;
		case '3':
			return optionList.value.streaming_type;
		case '4':
			return optionList.value.electronic_type;
		case '5':
			return optionList.value.electronic_type;
		default:
			return [
				{
					value: '',
					label: '',
				},
			];
	}
};
const forms = ref<FormInstance>();
const submitForm = async () => {
	if (!forms) return;
	return await forms.value?.validate((valid: any) => {
		if (valid) {
			// console.log(info.value, '数据');
		} else {
			console.log('error submit!');
			return false;
		}
	});
};
onMounted(() => {
	const { classification_type, sql_type, img_type, streaming_type, electronic_type, belong_domain, protectionLevel_type } = useDict(
		'classification_type',
		'sql_type',
		'img_type',
		'streaming_type',
		'electronic_type',
		'belong_domain',
		'protectionLevel_type'
	);
	optionList.value = {
		classification_type: classification_type,
		sql_type: sql_type,
		img_type: img_type,
		streaming_type: streaming_type,
		electronic_type: electronic_type,
		belong_domain: belong_domain,
		protectionLevel_type: protectionLevel_type,
	};
});
defineExpose({ info });
</script>
